<template>
  <div class="header">
    <!-- 左列 -->
    <span class="logo">
       后台管理系统
    </span>
    <el-icon class="icon" @click="setAsideWidthHandle">
       <Fold />
    </el-icon>
    <!-- 右列 -->
    <div class="f_right">
       <el-tooltip :enterable="false" effect="dark" placement="bottom" content="刷新">
        <el-icon class="icon">
            <Refresh @click="refreshHandle"/>
         </el-icon>
       </el-tooltip> 
         <el-icon class="icon">
            <FullScreen @click="toggle" />
         </el-icon>
         <el-dropdown @command="commandHandle">
            <span>
                <!-- 放置头像 -->
                <el-avatar size="30" :src="$store.state.user.userName"/>
                {{$store.state.user.userName}}
                <el-icon class="el-icon--right" style="margin-left:10px">
                   <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>  
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>    
            </template>
         </el-dropdown>
    </div>
    <!-- “修改密码”对话框 -->
    <el-dialog v-model="dialogEditPassword" title="修改密码" width="40%">
        <el-form ref="ruleFormRefEdit" :model="ruleFormEdit" :rules="rulesEdit" label-width="80px">
            <el-form-item label="原密码" prop="oldpassword">
                 <el-input v-model="ruleFormEdit.oldpassword"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input v-model="ruleFormEdit.password"></el-input>
           </el-form-item>
           <el-form-item label="确认新密码" prop="repassword">
            <el-input v-model="ruleFormEdit.repassword"></el-input>
       </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <div class="dialog-footer">
                <el-button  @click="dialogEditPassword = false">取消</el-button>
                <el-button  @click="editPasswordHadle">确定</el-button>
            </div>
        </span>  
        </template>
  </el-dialog>
  </div>
</template>

<script setup>
import{Fold,Refresh,FullScreen} from '@element-plus/icons-vue'
import {ElMessage,ElMessageBox} from 'element-plus'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
// 浏览器全屏的方法
import{useFullscreen} from '@vueuse/core'
// 导入修改密码模块
import { useEditPassword}from '@/utils/useEditPassword.js'


// 控制左侧导航栏菜单的展开和隐藏
const setAsideWidthHandle=()=>{
    store.commit('setAsideWidth')
}
// 解构出修改密码的属性和方法
const{
    dialogEditPassword,
    ruleFormEdit,
    rulesEdit,
    ruleFormRefEdit,
    editPasswordHadle
}=useEditPassword()
// 监听下拉菜单事件
const commandHandle=(res)=>{
        if(res=='editPassword'){
           // 修改密码
           dialogEditPassword.value=true
        }

        if(res=='logout'){
           // 退出登录
           logout();
        }
}

const{toggle}=useFullscreen()
// 页面刷新方法
const refreshHandle=()=>{
    location.reload()
}
const store=useStore()
const router=useRouter()

// 退出登录
const logout=async()=>{
    const res=await ElMessageBox.confirm(
        '是否退出登录?',
        '注意',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).catch(err=>{
        return err
    })

    if(res=='confirm'){
    // 用户单击了"确定”按钮
    // 删除本地token
    window.sessionStorage.removeItem('token')
    // 删除Vuex中的用户信息
    store.commit('setUser',{})
    // 跳转到登录页面
    router.push({path:"/login"});   
    }
}    
</script>

<style lang="less" scoped>
.header{
    height:100%;
    display: flex;
    color: #fff;
    align-items: center;
    .f_right{
        margin-left: auto;
        display:flex;
        align-items: center;
        height:100%;
        padding-right: 20px;

        .el-dropdown{
            margin-left: 20px;
            color: #fff;
            cursor: pointer;
            
            span{
                display: flex;
                align-items: center;
                .el-avater{
                    margin-right: 10px;
                }
            }
        }
    }
.logo{
    font-size: 18px;
    padding-right: 20px;
    width: 120px;
    text-align: center;
}
.icon{
    width: 30px;
    height: 100%;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}
.icon:hover{
    background: #065327;
}    
}
</style>